<template>
  <div class="container">
    <div class="menuList">
      <div
        class="menuItem"
        :class="{'menuActive':isActive==index}"
        v-for="(item,index) in columnsRoot"
        :key="index"
        @click="menuClick(item.id,index)"
      >
        <span>{{item.text}}</span>
        <div class="infoIcon" v-if="item.info>0">{{item.info}}</div>
      </div>
    </div>
    <div class="menuContent">
      <div class="goods" v-for="(item,index) in list" :key="index">
        <div class="leftArea">
          <img :src="item.picture" @click.stop="preView(item.picture)" />
        </div>
        <div class="rightArea">
          <div
            class="title"
            style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
          >{{item.text}}</div>
          <div class="tag">
            <span class="normalTag" v-if="item.freshStr=='非生鲜'">{{item.freshStr}}</span>
            <span class="redTag" v-if="item.freshStr=='生鲜'">{{item.freshStr}}</span>
            <span class="normalTag" style="margin-left:4px">{{item.unit}}</span>
          </div>
          <div class="tag" style="margin-top: 24rpx;">
            <span class="normalTag">市场价:￥{{item.marketPrice}}</span>
          </div>
          <div class="tag" style="margin-bottom: 0;margin-top: 24rpx;">
            <span
              class="normalTag"
              style="background: #44b549;color: #fff;"
              v-if="item.standard"
            >规格:{{item.standard}}</span>
          </div>
          <!-- <div class="tagPrice">
            <span>市：</span>
            <span class="miniPrice">{{item.marketPrice}}</span>
          </div>-->
          <div class="tagPrice">
            <span>￥</span>
            <span class="miniPrice">{{item.today}}</span>
          </div>
        </div>
        <div class="step">
          <template v-if="item.quantity>0">
            <img src="../../../static/images/jian.png" @click.stop="reduce(item,index)" />
            <div class="num">{{item.quantity||0}}</div>
            <img src="../../../static/images/addIcon.png" @click.stop="add(item,index)" />
          </template>
          <template v-else>
            <img src="../../../static/images/addIcon.png" @click.stop="add(item,index)" />
          </template>
        </div>
      </div>
    </div>
    <div class="shoppingCar" @click="see">
      <div>总计：</div>
      <div class="price">{{total}}</div>
      <div style="flex:1;margin-left:8rpx">件</div>
      <div class="jiesuan" @click.stop="jiesuan">去结算</div>
    </div>
    <van-popup :show="showDialog" position="bottom" round @clickOverlay="clickOverlay">
      <div class="shopList">
        <div class="blackDiv"></div>
        <div class="shopTitle">
          <div class="clearCar" @click.stop="clearShopCar">
            <span class="iconCenter">
              <van-icon name="delete" />
            </span>
            <span>清空购物车</span>
          </div>
          <div class="jiesuanButton" @click.stop="jiesuan">去结算</div>
        </div>
        <div class="miniGood" v-for="(item,index) in shopCarList" :key="index">
          <div class="leftArea">
            <img class="mini" style="width:120rpx;height:120rpx" :src="item.picture" />
          </div>
          <div class="rightArea">
            <div
              class="title"
              style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
            >{{item.text}}</div>
            <div class="tag">
              <span class="normalTag" v-if="item.freshStr=='非生鲜'">{{item.freshStr}}</span>
              <span class="redTag" v-if="item.freshStr=='生鲜'">{{item.freshStr}}</span>
              <span class="normalTag" style="margin-left:4px">{{item.unit}}</span>
              <span class="normalTag" style="margin-left:4px">市场价:￥{{item.marketPrice}}</span>
            </div>
            <div class="tag" v-if="item.standard">
              <span class="normalTag" style="background: #44b549;color: #fff;">规格:{{item.standard}}</span>
            </div>
            <div class="tagPrice" style="margin-top:0">
              <span>￥</span>
              <span class="miniPrice">{{item.today}}</span>
            </div>
          </div>
          <div class="numArea">
            <img src="../../../static/images/jian.png" @click.stop="miniReduce(item)" />
            <div class="num">{{item.quantity||0}}</div>
            <img src="../../../static/images/addIcon.png" @click.stop="miniAdd(item)" />
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";
import store from "@/utils/factory.js";
import { getSub, getRoot } from "@/http";

export default {
  components: {
    card
  },

  data() {
    return {
      isActive: 0,
      mainActiveIndex: 0,
      activeId: null,
      maxHeight: 800,
      columnsRoot: [],
      list: [],
      shopCarList: [],
      total: 0,
      showDialog: false,
      rootId: null
    };
  },
  methods: {
    menuClick(id, index) {
      this.isActive = index;
      this.rootId = id;
      console.log(this.rootId);
      this.getList(id);
    },
    getRoot() {
      getRoot().then(res => {
        this.getSub(res.data.id);
      });
    },
    clickOverlay() {
      this.showDialog = false;
    },
    jiesuan() {
      if (this.shopCarList.length == 0) {
        mpvue.showToast({
          title: "查询不到购物车信息",
          icon: "none",
          duration: 2000
        });
        return false;
      }
      store.set("shopList", this.shopCarList);
      this.showDialog = false;
      mpvue.navigateTo({
        url: "../counter/main"
      });
    },
    see() {
      if (this.total > 0) {
        this.showDialog = true;
      }
    },
    clearShopCar() {
      this.shopCarList = [];
      this.total = 0;
      this.list.map(item => {
        item.quantity = 0;
      });
      this.columnsRoot.map(item => {
        item.info = 0;
      });
      store.remove("shopList");
    },
    miniAdd(item) {
      // 获取该商品在shopCarList中的定位
      let place = this.shopCarList.findIndex(v => {
        return v.id == item.id;
      });
      let self = this;
      this.shopCarList[place].quantity = this.shopCarList[place].quantity + 1;
      // 获取该商品在哪个大类
      let rootPlace = this.columnsRoot.findIndex(v => {
        return v.id == self.shopCarList[place].rootId;
      });
      this.columnsRoot[rootPlace].info = this.columnsRoot[rootPlace].info + 1;
      // 当该商品锁在的大类id与当前大类的id相等
      if (this.rootId == this.shopCarList[place].rootId) {
        let index = this.list.findIndex(v => {
          return v.id == item.id;
        });
        this.list[index].quantity = this.list[index].quantity + 1;
      }
      this.total = this.total + 1;
      store.set("shopList", this.shopCarList);
      this.$forceUpdate();
    },
    miniReduce(item) {
      let place = this.shopCarList.findIndex(v => {
        return v.id == item.id;
      });
      let self = this;
      this.shopCarList[place].quantity = this.shopCarList[place].quantity - 1;
      if (this.shopCarList[place].quantity == 0) {
        let rootPlace = this.columnsRoot.findIndex(v => {
          return v.id == self.shopCarList[place].rootId;
        });
        this.columnsRoot[rootPlace].info = this.columnsRoot[rootPlace].info - 1;
        this.total = this.total - 1;
        this.shopCarList.splice(place, 1);
        this.$forceUpdate();
        store.set("shopList", this.shopCarList);
        return false;
      }
      let rootPlace = this.columnsRoot.findIndex(v => {
        return v.id == self.shopCarList[place].rootId;
      });
      this.columnsRoot[rootPlace].info = this.columnsRoot[rootPlace].info - 1;
      if (this.rootId == this.shopCarList[place].rootId) {
        let index = this.list.findIndex(v => {
          return v.id == item.id;
        });
        this.list[index].quantity = this.list[index].quantity - 1;
      }
      this.total = this.total - 1;
      this.$forceUpdate();
      store.set("shopList", this.shopCarList);
    },
    reduce(item, index) {
      this.list[index].quantity = this.list[index].quantity - 1;
      this.columnsRoot[this.isActive].info =
        this.columnsRoot[this.isActive].info - 1;
      let place = this.shopCarList.findIndex(v => {
        return v.id == item.id;
      });
      this.shopCarList[place].quantity = this.shopCarList[place].quantity - 1;
      if (this.shopCarList[place].quantity == 0) {
        this.shopCarList.splice(place, 1);
      }
      this.total = this.total - 1;
      this.$forceUpdate();
      store.set("shopList", this.shopCarList);
    },
    preView(imgUrl) {
      console.log("111");
      mpvue.previewImage({
        urls: [imgUrl], //需要预览的图片http链接列表，注意是数组
        current: "", // 当前显示图片的http链接，默认是第一个
        success: function(res) {},
        fail: function(res) {},
        complete: function(res) {}
      });
    },
    add(item, index) {
      this.list[index].quantity = this.list[index].quantity + 1;
      this.columnsRoot[this.isActive].info =
        this.columnsRoot[this.isActive].info + 1;
      let place = this.shopCarList.findIndex(v => {
        return v.id == item.id;
      });
      if (place == -1) {
        this.shopCarList.push({
          text: item.text,
          id: item.id,
          rootId: this.rootId,
          picture: item.picture,
          quantity: item.quantity,
          unit: item.unit,
          today: item.today,
          marketPrice: item.marketPrice,
          standard: item.standard,
          freshStr: item.fresh == "off" ? "非生鲜" : "生鲜"
        });
      } else {
        this.shopCarList[place].quantity = this.shopCarList[place].quantity + 1;
      }
      console.log(this.shopCarList);
      this.total = this.total + 1;
      this.$forceUpdate();
      store.set("shopList", this.shopCarList);
    },
    getList(id) {
      let self = this;
      getSub({ id: id }).then(res => {
        self.list = [];
        if (res.rows.length > 0) {
          res.rows.map(item => {
            self.list.push({
              text: item.name,
              id: item.id,
              rootId: self.rootId,
              picture: item.picture,
              quantity: 0,
              unit: item.unit,
              today: item.today,
              marketPrice: item.marketPrice,
              standard: item.standard,
              freshStr: item.fresh == "off" ? "非生鲜" : "生鲜"
            });
          });
          self.shopCarList.map(item => {
            let place = this.list.findIndex(v => {
              return v.id == item.id;
            });
            if (place != -1) {
              self.list[place].quantity = item.quantity;
              self.$forceUpdate();
            }
          });
        }
      });
    },
    getSub(id, type) {
      let self = this;
      getSub({ id: id }).then(res => {
        if (res.rows.length > 0) {
          res.rows.map(item => {
            self.columnsRoot.push({
              text: item.name,
              id: item.id,
              info: 0
            });
          });
          if (self.shopCarList.length > 0) {
            self.shopCarList.map(v => {
              self.columnsRoot.map(o => {
                if (v.rootId == o.id) {
                  o.info = o.info + v.quantity;
                }
              });
            });
          }
          this.isActive = 0;
          this.rootId = self.columnsRoot[0].id;
          this.getList(this.rootId);
        }
      });
    }
  },
  onShow() {
    let self = this;
    this.columnsRoot = [];
    this.shopCarList = store.get("shopList") || [];
    this.total = 0;
    this.shopCarList.map(item => {
      self.total = self.total + item.quantity;
    });
    this.getRoot();
  },
  mounted() {
    this.maxHeight = mpvue.getSystemInfoSync().windowHeight;
  },
  created() {}
};
</script>

<style>
.card {
  display: flex;
  flex-direction: column;
  margin: 24rpx 24rpx 0 24rpx;
  font-size: 28rpx;
  background: #fff;
  position: relative;
}

.tagPrice {
  font-weight: 500;
  margin-top: 20rpx;
  color: #e1251b;
  font-size: 20rpx;
}

.clearCar {
  flex: 1;
  text-align: left;
}

.jiesuanButton {
  background: #ffc300;
  padding: 10rpx 32rpx;
  border-radius: 8rpx;
}

.miniPrice {
  font-size: 30rpx;
}

.blackDiv {
  height: 20rpx;
  background: #ddd;
}

.iconCenter {
  vertical-align: middle;
  margin-right: 4px;
}

.shopList {
  max-height: 700rpx;
}

.shopTitle {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  text-align: right;
  padding: 20rpx;
  border-bottom: 1px solid #f5f5f5;
}

.price {
  font-size: 40rpx;
}

.jiesuan {
  height: 100%;
  background: #ffc300;
  color: #222222;
  width: 180rpx;
  line-height: 88rpx;
  text-align: center;
}

.shoppingCar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #fff;
  padding-left: 40rpx;
}

.standard {
  font-size: 24rpx;
  color: #999999;
  margin-top: 4rpx;
}

.num {
  margin: 0 16rpx;
}

.step {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
}

.step img {
  width: 24px;
  height: 24px;
}

.numArea img {
  width: 20px;
  height: 20px;
}

.numArea {
  flex: 1;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.normalTag {
  font-size: 20rpx;
  background: #e4e7ed;
  padding: 8rpx 12rpx;
  border-radius: 8rpx;
}

.redTag {
  font-size: 20rpx;
  background: #f56c6c;
  padding: 8rpx 12rpx;
  border-radius: 8rpx;
  color: #fff;
}

.menuContent {
  margin-left: 30%;
  background: #fff;
  height: calc(100vh - 88rpx);
  overflow-y: auto;
}

.goods {
  display: flex;
  align-items: center;
  position: relative;
  padding: 24rpx 16rpx;
}

.miniGood {
  display: flex;
  position: relative;
  padding: 24rpx 30rpx;
}

.menuActive {
  background: #fff;
  font-weight: bold;
  position: relative;
  color: #3c3c3c !important;
}

.menuActive::after {
  position: absolute;
  content: "";
  width: 3px;
  left: 0;
  top: 4px;
  bottom: 4px;
  background: #ffc300;
}

.menuList {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  /* min-width: 240rpx; */
  background-color: #fafafa;
  height: calc(100vh - 88rpx);
  overflow-y: auto;
}

.menuItem {
  font-size: 28rpx;
  padding: 24rpx 16rpx 24rpx 24rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #696969;
  position: relative;
}

.infoIcon {
  background: #ee0a24;
  color: #fff;
  border-radius: 50%;
  /* padding: 2rpx; */
  text-align: center;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  font-size: 20rpx;
  position: absolute;
  top: 12rpx;
  right: 12rpx;
  font-weight: 500;
}

div::-webkit-scrollbar {
  width: 0;
}

.content {
  position: absolute;
  height: 100vh;
}

.badget {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}
.rightArea {
  font-size: 28rpx;
  color: #222222;
  padding-left: 12rpx;
}

.leftArea img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
}

.detail {
  font-size: 28rpx;
}

.info {
  font-size: 24rpx;
  color: #969799;
}

.delButton {
  color: #fff;
  background: #ed5565;
  padding: 8rpx 24rpx;
  border-radius: 8rpx;
}

.topArea {
  display: flex;
  padding: 24rpx;
  align-items: center;
}

.hold {
  flex: 1;
}

.tag {
  margin: 20rpx 0;
  font-size: 24rpx;
}

.bottomArea {
  border-top: 1px solid #ebedf0;
  display: flex;
  flex-direction: column;
  padding: 0 24rpx;
}

.content {
  display: flex;
  border-bottom: 1px solid #ebedf0;
  padding: 12px 0;
}

.noBorder {
  border: none !important;
}

.card {
  padding: 0;
}

.project {
  font-weight: bold;
  font-size: 36rpx;
  flex: 1;
}
.phone {
  color: #eb6117;
  font-weight: bold;
  font-size: 28rpx;
  margin-left: 12rpx;
}

.tabTitle {
  color: #eb6117;
}

/* .tabsBg {
  background: #2c2c2c;
} */

.bottomTips {
  text-align: center;
  margin-top: 24rpx;
  margin-bottom: 24rpx;
  font-size: 28rpx;
  color: #a4a4a4;
}
</style>
